<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginatio_config.currentPage"
      :page-sizes="paginatio_config.pageSizes"
      :page-size="paginatio_config.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paginatio_config.total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'Pagination',
  props: {
    paginationConfig: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      paginatio_config: {
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 30, 40],
        total: 0
      }
    }
  },
  watch: {
    paginationConfig: {
      deep: true,
      handler (val) {
        this.initConfig()
      }
    }
  },
  created () {
    this.initConfig()
  },
  methods: {
    initConfig () {
      for (const key in this.paginatio_config) {
        if (Object.keys(this.paginationConfig).includes(key)) {
          this.paginatio_config[key] = this.paginationConfig[key]
        }
      }
    },
    handleSizeChange (val) {
      const params = {
        pageSize: val
      }
      this.$emit('paginationChange', params)
    },
    handleCurrentChange (val) {
      const params = {
        currentPage: val
      }
      this.$emit('paginationChange', params)
    }
  }
}
</script>
